<template>
  <div class="vip-list-container">

    <!-- 搜索选项 -->
    <div class="vip-list-top">
      <el-row>
        <el-col :span="5">
          <div class="vip-list-top-col">
            <span style="padding:0 5px">统计方式</span>
            <el-radio style="margin-top: 10px" v-model="type" label="1">按年统计</el-radio>
            <el-radio style="margin-top: 10px" v-model="type" label="2">按月统计</el-radio>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="order-manage-top-col" style="padding-left:0">
            <el-date-picker style="width:100%"
              v-model="time"
              type="month"
              size="small">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="2" style="float: right">
          <a @click="export_data" v-bind:href="export_url" target="_blank">导出</a>
        </el-col>
      </el-row>
    </div>

    <!-- 表格 -->
    <div>
      <el-table :data="list" style="width:100%" stripe>
        <el-table-column prop="time" label="月/日" align="center"></el-table-column>
        <el-table-column prop="money" label="交易额" align="center"></el-table-column>
        <el-table-column prop="total" label="交易量" align="center"></el-table-column>
        <el-table-column prop="cost" label="成本" align="center"></el-table-column>
        <el-table-column prop="express_price" label="运费" align="center"></el-table-column>
        <el-table-column prop="refund_money" label="退款" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getSales } from '@/api/statistics'
import { parseTime } from '@/utils/index'

export default {
  name: 'vipList',
  data() {
    return {

      list: [],//表格数据
      key: this.$store.state.app.activeApp.saa_key,
      limit: 100,
      page: 1,
      type: '1',
      year: '',
      month: '',
      time: '',
      export_url: '',
    }
  },
  watch: {
    time(newTime) {
      if(newTime!==null){
        this.year = parseTime(newTime,'{y}');
        if (this.type === '2'){
          this.month = parseTime(newTime,'{m}');
        }
      }else{
        this.year = '';
        this.month = '';
      }
    }
  },
  mounted() {
    this.getSales();
  },
  methods: {
    /**
     * 获取列表
     */
    getSales() {
      const params = { key: this.key };
      getSales(params).then(response => {
        if(response.status === 200){
          this.list = [];
          for (let i in response.data){
            this.list.push(response.data[i])
          }
        }else if(response.status === 204){
          this.list = [];
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 搜索
     */
    search() {
      this.params = {
        key: this.key,
        year: this.year,
        type: this.type,
      }
      if (this.type === '2'){
        this.params.month = this.month;
      }
      getSales(this.params).then(response => {
        if(response.status === 200){
          this.list = [];
          for (let i in response.data){
            this.list.push(response.data[i])
          }
        }else if(response.status === 204){
          this.list = [];
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 导出
     */
    export_data() {
      this.export_url = process.env.VUE_APP_BASE_API + '/salesExport?key=' + this.key + '&type=' + this.type + '&year=' + this.year;
      if (this.type === '2'){
        this.export_url += '&month=' + this.month;
      }
    },
    /**
     * 翻页
     */
    changePage(page) {
      this.page = page;
      this.getSales();
    }
  },
}
</script>

<style lang="scss" scoped>
.vip-list-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.vip-list-top{
  margin: 20px auto;
  text-align: center;
  height: 40px;
  line-height: 40px;
  &-col{
    padding: 0 15px;
    max-width: 95%;
    overflow: hidden;
    display: flex;
    &>span{
      flex: 2;
      display: inline-block;
      padding: 0 5px;
      white-space: nowrap;
      overflow: hidden;
    }
    &>div{
      flex: 4
    }
  }
}
</style>
